import React, { useEffect, useState } from 'react'
import { useLocation } from 'react-router-dom'
import axios from '../../api/axios';
 import Mylist from '../../components/Mylist'
 import { useNavigate, Outlet } from 'react-router-dom'
 import {NavBar} from 'antd-mobile'
function Index() { 
    let navigate = useNavigate()
    const {state}=useLocation()
    console.log(state);
    const [list,setList]=useState([])
       const [user, setuser] = useState(JSON.parse(localStorage.getItem('userInfo')))
      const [collectList,setcollectList]=useState(JSON.parse(localStorage.getItem('collectList')) ||[])
    const getList=async()=>{
const res=await axios.get('/api/list/detail',{params:{id:state}})
console.log(res);
const {data,code}=res.data
if(code==200){
    setList([data])
}
    }
    useEffect(()=>{
        getList()
    },[])
    const handelsc=(item)=>{
        const collstate=collectList.some((it)=>it.id===item.id)
        if(collstate){
            const newcollectList=collectList.filter(it=>it.id !==item.id)
            setcollectList(newcollectList)
            localStorage.setItem('collectList',JSON.stringify(newcollectList))
        }else{
            setcollectList([item,...collectList])
             localStorage.setItem('collectList',JSON.stringify([item,...collectList]))
        }
    }
  return (
    <div  style={{backgroundColor:'#000',width:'100%',height:'100%'}}>
        <div>
             <NavBar onBack={()=>navigate('/')} style={{color:'#fff'}} right={
                <div style={{fontSize:'20px',color:'goldenrod'}}>已使用</div>
             }>详情</NavBar>
       <div >
      {
        list.length>0 && list.map((item,ind)=>(
            <div>
             <div style={{width:'200px',marginLeft:'80px',height:'200px',marginTop:'20px'}}>
              <Mylist item={item} handelsc={handelsc} collectList={collectList} user={user}></Mylist>
              <div style={{width:'200px', background:'#fff', borderRadius:'10px',marginLeft:'8px'}}>
                <img src="" alt=""
                width={180} style={{marginLeft:'8px'}} />
                </div>   
            </div>   
            </div>
            
           
        ))
      }
    </div>
   
        </div>
     
    </div>
   
  )
}

export default Index